<template>
  <view class="cleaning-test-page">
    <!-- 导航栏 -->
    <u-navbar title="保洁管理测试" back-icon="arrow-left" />
    
    <!-- 测试区域 -->
    <view class="test-section">
      <view class="section-title">API接口测试</view>
      
      <!-- 统计信息测试 -->
      <view class="test-card">
        <view class="test-title">统计信息测试</view>
        <u-button 
          type="primary" 
          text="获取统计信息" 
          @click="testStatistics"
          :loading="loading.statistics"
        />
        <view v-if="testResult.statistics" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.statistics) }}</text>
        </view>
      </view>
      
      <!-- 区域管理测试 -->
      <view class="test-card">
        <view class="test-title">区域管理测试</view>
        <u-button 
          type="primary" 
          text="获取区域列表" 
          @click="testAreaList"
          :loading="loading.areaList"
        />
        <view v-if="testResult.areaList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.areaList) }}</text>
        </view>
      </view>
      
      <!-- 任务管理测试 -->
      <view class="test-card">
        <view class="test-title">任务管理测试</view>
        <u-button 
          type="primary" 
          text="获取任务列表" 
          @click="testTaskList"
          :loading="loading.taskList"
        />
        <view v-if="testResult.taskList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.taskList) }}</text>
        </view>
      </view>
      
      <!-- 记录管理测试 -->
      <view class="test-card">
        <view class="test-title">记录管理测试</view>
        <u-button 
          type="primary" 
          text="获取记录列表" 
          @click="testRecordList"
          :loading="loading.recordList"
        />
        <view v-if="testResult.recordList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.recordList) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 组件测试区域 -->
    <view class="test-section">
      <view class="section-title">组件测试</view>
      
      <!-- 状态选择器测试 -->
      <view class="test-card">
        <view class="test-title">状态选择器测试</view>
        <StatusSelector
          v-model="testData.taskStatus"
          type="task"
          placeholder="选择任务状态"
          @change="onStatusChange"
        />
        <text class="test-info">选中值：{{ testData.taskStatus }}</text>
      </view>
      
      <!-- 任务类型选择器测试 -->
      <view class="test-card">
        <view class="test-title">任务类型选择器测试</view>
        <TaskTypeSelector
          v-model="testData.taskType"
          placeholder="选择任务类型"
          @change="onTaskTypeChange"
        />
        <text class="test-info">选中值：{{ testData.taskType }}</text>
      </view>
      
      <!-- 区域类型选择器测试 -->
      <view class="test-card">
        <view class="test-title">区域类型选择器测试</view>
        <AreaTypeSelector
          v-model="testData.areaType"
          placeholder="选择区域类型"
          @change="onAreaTypeChange"
        />
        <text class="test-info">选中值：{{ testData.areaType }}</text>
      </view>
      
      <!-- 优先级选择器测试 -->
      <view class="test-card">
        <view class="test-title">优先级选择器测试</view>
        <PrioritySelector
          v-model="testData.priority"
          placeholder="选择优先级"
          @change="onPriorityChange"
        />
        <text class="test-info">选中值：{{ testData.priority }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  getCleaningStatistics, 
  getCleaningAreaPage, 
  getCleaningTaskPage, 
  getCleaningRecordPage 
} from '@/api/cleaning'
import StatusSelector from '@/components/StatusSelector.vue'
import TaskTypeSelector from '@/components/TaskTypeSelector.vue'
import AreaTypeSelector from '@/components/AreaTypeSelector.vue'
import PrioritySelector from '@/components/PrioritySelector.vue'

// 响应式数据
const loading = reactive({
  statistics: false,
  areaList: false,
  taskList: false,
  recordList: false
})

const testResult = reactive({
  statistics: null,
  areaList: null,
  taskList: null,
  recordList: null
})

const testData = reactive({
  taskStatus: 1,
  taskType: 'routine',
  areaType: 'building',
  priority: 2
})

// API测试方法
const testStatistics = async () => {
  try {
    loading.statistics = true
    const response = await getCleaningStatistics()
    testResult.statistics = response
    uni.showToast({
      title: '统计信息获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取统计信息失败:', error)
    testResult.statistics = { error: error.message }
    uni.showToast({
      title: '获取统计信息失败',
      icon: 'none'
    })
  } finally {
    loading.statistics = false
  }
}

const testAreaList = async () => {
  try {
    loading.areaList = true
    const response = await getCleaningAreaPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.areaList = response
    uni.showToast({
      title: '区域列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取区域列表失败:', error)
    testResult.areaList = { error: error.message }
    uni.showToast({
      title: '获取区域列表失败',
      icon: 'none'
    })
  } finally {
    loading.areaList = false
  }
}

const testTaskList = async () => {
  try {
    loading.taskList = true
    const response = await getCleaningTaskPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.taskList = response
    uni.showToast({
      title: '任务列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取任务列表失败:', error)
    testResult.taskList = { error: error.message }
    uni.showToast({
      title: '获取任务列表失败',
      icon: 'none'
    })
  } finally {
    loading.taskList = false
  }
}

const testRecordList = async () => {
  try {
    loading.recordList = true
    const response = await getCleaningRecordPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.recordList = response
    uni.showToast({
      title: '记录列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取记录列表失败:', error)
    testResult.recordList = { error: error.message }
    uni.showToast({
      title: '获取记录列表失败',
      icon: 'none'
    })
  } finally {
    loading.recordList = false
  }
}

// 组件事件处理
const onStatusChange = (option) => {
  console.log('状态选择器变化:', option)
  uni.showToast({
    title: `选择了状态：${option.label}`,
    icon: 'none'
  })
}

const onTaskTypeChange = (option) => {
  console.log('任务类型选择器变化:', option)
  uni.showToast({
    title: `选择了任务类型：${option.label}`,
    icon: 'none'
  })
}

const onAreaTypeChange = (option) => {
  console.log('区域类型选择器变化:', option)
  uni.showToast({
    title: `选择了区域类型：${option.label}`,
    icon: 'none'
  })
}

const onPriorityChange = (option) => {
  console.log('优先级选择器变化:', option)
  uni.showToast({
    title: `选择了优先级：${option.label}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.cleaning-test-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.test-section {
  padding: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.test-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .test-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .test-result {
    margin-top: 20rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 8rpx;
    
    text {
      font-size: 24rpx;
      color: #666;
      word-break: break-all;
    }
  }
  
  .test-info {
    display: block;
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #666;
  }
}
</style>
